<template>
	<div class="wrap datatime">
		<div class="page-title">
			<h3>时间/日期</h3>
		</div>
		<div class="table-wrap">
			<table>
				<thead class="thead-bottom-line">
					<tr>
						<th style="width: 380px;">内容</th>
						<th style="width: 640px;">时间和日期</th>
						<th style="width: 175px;">操作</th>
					</tr>
				</thead>
			
				<tbody>
					<tr>
						<td style="width: 380px;">当前时间：</td>
						<td style="width: 640px;">{{ nowtime }}</td>
						<td style="width: 175px;" rowspan="2">
							<button @click="syncTime()" class="butn button button--aylen">立即同步</button>
						</td>
					</tr>
					<tr>
						<td style="width: 380px;">系统时区：</td>
						<td style="width: 175px;">
							<select class="time-zone">
								<option>(GMT+08:00) 北京,重庆,香港特别行政区,乌鲁木齐</option>
							</select>
						</td>
					</tr>
					<tr>					
						<td style="width: 380px;">系统日期：</td>
						<td style="width: 640px;">
							<div id="systime">{{ systime }}</div>
							<div class="tdchild">
								 <span class="tag">调整：</span>
								 <input id="altertime" class="time" type="text" data-field="datetime" readonly />
							</div>
						</td>
						<td style="width: 175px;" rowspan="2" @click="setsystem()" ><button class="butn button button--aylen">确认</button></td>
					</tr>
					<tr>					
						<td style="width: 380px;">SNTP：</td>
						<td style="width: 640px;">
							<span><input class="checkbox" v-model="check" type="checkbox" />自动与SNTP服务同步</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
    <div id="dtBox"></div>
		<noticeModal :id="'notice'" :title="'提示'" :status ="status"></noticeModal>
	</div>
</template>
<script>
	import SystemService from 'services/systemService'
	import noticeModal from 'components/common/noticeModal'
	export default {
		components: {
			noticeModal
		},
		created() {
			this.getData()
			this.intervalid = setInterval(() => this.getData(),1000)
		},
		mounted() {
			$("#dtBox").DateTimePicker({
					dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
					dateFormat: "yyyy-MM-dd",
					timeFormat: "HH:mm:ss",
					maxDateTime:this.nowtime
			});
		},
		data() {
				return {
					nowtime:"Loading...",
					systime:"Loading...",
					check:false,
					status:''
				}
		},
		beforeDestroy() {
			clearInterval(this.intervalid)
		},
    methods: {
			syncTime() {
				$("#altertime").val(this.nowTime(1))
				this.setsystem()
			},
			getData() {
				this.nowTime(0)
				this.getsystime()
			},			
      nowTime(pree) {//pree 为一秒误差值
				let date = new Date();
				let now = "";
				let year = date.getFullYear()
				let Month = date.getMonth() + 1 
				let Days = date.getDate() 
				let Hours = date.getHours() 
				let Minutes = date.getMinutes() 
				let Seconds = date.getSeconds() + pree
				now = `${year}-${sigForamt(Month)}-${sigForamt(Days)} ${sigForamt(Hours)}:${sigForamt(Minutes)}:${sigForamt(Seconds)}`
				this.nowtime = now
				return now
				function sigForamt(time){
						return Number(time) > 9 ? time :  '0' + time
				}
      },
			getsystime() {
				SystemService.getTime()
				.then((res) => {
					if (res.errcode === 0) {
						this.systime =res['5']
					}
				})
      },
			setsystem() {
				if ($("#altertime").val() == "") {
					return false
				} else {
					this.status ='ing'
					SystemService.setTime($("#altertime").val())
					.then((res) => {
						if (res.errcode === 0) {
							this.status ='ok'				
						} else {
							this.status ='error'
						}
						$('#notice').modal('show')
					})
				}
			}
		}		
	}   
</script>